<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<link href="${pageContext.request.contextPath}/resources/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/resources/assets/css/font-awesome.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/resources/assets/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/resources/jslib/jquery-jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<!-- ace styles -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/assets/css/ace.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/assets/css/ace-skins.min.css" />
<style type="text/css">

 th.ui-th-column div{  
            white-space:normal !important;  
            height:auto !important;  
            padding:0px;  
            text-align: center;<!--让表头文字居中显示-->
}  
.ext-icon-key:{
	background: url('')
}
</style>
</head>
<body>
	
		<div class="main-container" id="main-container">
						<div class="row">
							<div class="col-xs-12">
								<table id="grid-table"></table>
								<div id="grid-pager"></div>
							</div><!-- /.col -->
						</div><!-- /.row -->
			</div>
			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
	
	<%@include file="/jsps/inc.jsp" %>
	<script src="${pageContext.request.contextPath}/resources/jslib/jquery-jqgrid/js/jquery.jqGrid.src.js" ></script>
	<script src="${pageContext.request.contextPath}/resources/jslib/jquery-jqgrid/js/i18n/grid.locale-cn.js" ></script>
	<script type="text/javascript" src="<%=basePath%>/resources/js/system.js"></script>
	
	
	<script type="text/javascript">
		function editPrivilege(id){
			var dialog=parent.bootstrapQ.dialog({
				title:"权限授权",
				 okbtn : '保存',
				url:'<%=contextPath%>/securityJsp/auth/privilege-auth.jsp?id='+id
			},function(){
				parent.submitForm(parent.bootstrapQ);
				return true;
			})
		}
		
		$(function(){
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";
			 
			$(grid_selector).jqGrid({
				url:WEB_ROOT+'/role/roles.action',
				editurl: WEB_ROOT+"/role/update.action",//定义对form编辑时的url
				deleteurl: WEB_ROOT+"/role/delete.action",//定义对form编辑时的url
				//postData 此数组内容直接赋值到url上，参数类型：{name1:value1…}
				datatype:'json',
				mtype:'GET',
				//sortorder:asc,排序顺序，升序或者降序（asc or desc）默认asc
				//scrollOffset:18,//设置垂直滚动条宽度
				//scroll:false,//创建一个动态滚动的表格，当为true时，翻页栏被禁用，使用垂直滚动条加载数据，且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时，表格只控制可见的几行，所有数据都在这几行中加载
				loadtext:'正在加载中，请稍候...',//当请求或者排序时所显示的文字内容,默认：Loading....
				caption: "",//设置为空，则不显示标题行  
				//cellEdit:true,//启用或者禁用单元格直接点击就可编辑功能,默认false,经测试鼠标移上去没样试了，这是为什额嘛？
				//loadonce: true, //如果为true，则一次加载所有数据。加载后，datatype被置为local，以后的操作都只针对本地数据  
				autowidth: true,//宽度是否自动autowidth: true 
				height:250,
				//rownumbers : true,是否显示行号,设置为true，则会多出一列，rn，作为id列，从1开始  
				rownumWidth:30,//ID列的宽度 
				//scroll:boolean or integer,//设置为true则表格的分页失效。动态拖动纵向滚动条时，才去继续加载数据，放置页面好用过多内存
				rowNum:15,//默认显示多少行
				toppager : false,//是否在顶部显示分页栏
				emptyrecords:'没有数据',//当返回的数据行数为0时显示的信息。只有当属性 viewrecords 设置为ture时起作用
				//sortName:'id'默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
				rowList:[10,20,30],//一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
				pager : pager_selector,//显示分页的位置，是一个选择器，如:#pagegrid
				forceFit : false,//拖动列宽时，保持总列宽的和不变，不会出现横向滚动条。比如当前列多了30px，那么右侧的列，就会少30px
				//footerrow:true,表格的下面，pager的上面添加一行
				//shrinkToFit:true/false,//如果设置true，则每列的宽度会按照当初设置的比例，然后按照表格的宽度进行缩放。如果为false，则走用户设置的数值 
				//multikey 默认空值，只有在multiselect设置为ture时起作用，定义使用那个key来做多选。shiftKey，altKey，ctrlKey
				multiselect : true,//是否可以行多选
				multiSort : false,
				altRows: true,//有条纹的表格  
				//能提高加载速度，尤其是loadonce=true时。但是这个设置为true，则treeGrid, subGrid, or afterInsertRow event都不能使用  
				//构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用
				gridview : true,
				//recordpos:'right', 定义了记录信息的位置： left, center, right，默认right
				recordtext:'({0}-{1})/{2}条',  //分页栏显示记录格式,记录/总记录
				pgtext:'{0}/{1}页', //分页栏显示记录格式，当前页/总页数
				colNames:[' ', 'ID','名称','启用', '代码','描述'],
				pagerpos:'center',//指定分页栏的位置,默认center
				//pgbuttons是否显示翻页按钮 默认true
				viewrecords : true,//定义是否要显示总记录数
				/*表格的工具栏。数组中有两个值，第一个为是否启用，第二个指定工具栏位置（相对于body layer），
				*如：[true,”both”] 。工具栏位置可选值：“top”,”bottom”, “both”. 
				*如果工具栏在上面，则工具栏id为“t_”+表格id；如果在下面则为 “tb_”+表格id；如果只有一个工具栏则为 “t_”+表格id
				
				toolbar:[
				        true,'top'
				],*/
			     //hiddengrid:true/false,//如果为true，开始时列表不读取数据。点击了按钮才读取。  
		        //hidegrid:true/false,//一个控制列表是否显示的按钮，在右上角  
		        //hoverrows:true/false,//如果设置为false则鼠标划过行的样式就没有了  
		        //inlineData:{},//当使用inlineedit的时候，传给后台的参数  
		        //multikey:"shiftKey/altKey/ctrlKey",//必须点哪个组合键后，才能多选.只有为多选状态时才可用  
		        //multiboxonly:true/false,//默认false,为true时表示只有点击复选框，才会进行改变复选框。一般情况下，点击行就可以多选  
		        //gridstate:visible //定义当前表格的状态：'visible' or 'hidden'
				colModel:[
					{
						 name:'act',index:'', 
						 width:90, 
						 fixed:true, 
						 sortable:false,
						 resize:false,
						// formatter:'actions', 
						formatter:function( cellValue, options, rowObject){
							var roleid=rowObject.id;
							return  '<div style="margin-left:8px;"><div title="权限授权" style="float: left; cursor: pointer; display: block;" class="ui-pg-div ui-inline-edit" onclick="editPrivilege('+roleid+')" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\')" data-original-title="授权"><span style="margin-left:0px;padding-left:0px;margin-top:2px;padding-right:2px;" class="ui-icon icon-key"></span></div><div title="编辑角色" style="float:left;cursor:pointer;" class="ui-pg-div ui-inline-edit" id="jEditButton_12" onclick="jQuery.fn.fmatter.rowactions.call(this,\'edit\');" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\')" data-original-title="Edit selected row"><span class="ui-icon ui-icon-pencil"></span></div><div title="删除角色" style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del" id="jDeleteButton_12" onclick="jQuery.fn.fmatter.rowactions.call(this,\'del\');" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');" data-original-title="Delete selected row"><span class="ui-icon ui-icon-trash"></span></div><div title="" style="float:left;display:none" class="ui-pg-div ui-inline-save" id="jSaveButton_12" onclick="jQuery.fn.fmatter.rowactions.call(this,\'save\');" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');" data-original-title="Submit"><span class="ui-icon ui-icon-disk"></span></div><div title="" style="float:left;display:none;margin-left:5px;" class="ui-pg-div ui-inline-cancel" id="jCancelButton_12" onclick="jQuery.fn.fmatter.rowactions.call(this,\'cancel\');" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');" data-original-title="Cancel"><span class="ui-icon ui-icon-cancel"></span></div></div>';
						}, 
						 formatoptions:{ 
						 	keys:true,
						 	delOptions:{
						 		recreateForm: true, 
						 		beforeShowForm:beforeDeleteCallback,
						 		onclickSubmit:function(params, postdata){
						 			params.url=WEB_ROOT+"/role/delete.action";
						 		}
							},
							//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
						}
					},
					{name:'id',index:'id', align:"center",width:30, sorttype:"int"},
					{name:'name',align:'center',index:'name', width:80,editable: true,editoptions:{size:"20",maxlength:"30"},
						unformat:function(cellvalue, options, cell){
							setTimeout(function(){
								$(cell).find("input[name='name']").css('font-size','14px').css('height','40px');
							},0)
						}},
					{name:'roleEnabled',index:'roleEnabled', align:'center',width:50,editable: true,edittype:'checkbox',editoptions: {value:"true:false"},
						unformat: aceSwitch,
						/* formatter:function(cellvalue, options, rowObject){
							var label='<label class="inline"><input type="checkbox" disabled class="ace ace-switch ace-switch-5" ';
							if(cellvalue)
								label+='checked';
							label+='/><span class="lbl"></span></label>';
							return label;
							
						} */
						
					},
					{name:'roleCode',index:'roleCode',align:'center', width:90, editable: true,
						/*unformat会在进入编辑模式时调用
						*cellValue:单元格的值
						*options全局设置
						*cell:当前单元格td
						*/
						unformat:function(cellValue,options,cell){
							//为什么使用setTimeout？
							//这是一个奇淫技巧,延迟操作,点击之后进入编辑模式后先让jqgrid自身先渲染，然后调用setTimeout里的函数进行额外样式修改
							setTimeout(function(){
								$(cell).find("input[name='roleCode']").css('font-size','14px').css('height','40px').css('text-align','center');
							},0);
						}},
					{name:'description',index:'description', width:200, editable: true,sortable:false,edittype:"textarea", editoptions:{rows:"3",cols:"80"},
						unformat:function(cellValue,options,cell){
							//为什么使用setTimeout？
							//这是一个奇淫技巧,延迟操作,点击之后进入编辑模式后先让jqgrid自身先渲染，然后调用setTimeout里的函数进行额外样式修改
							setTimeout(function(){
								$(cell).find("input[name='description']").css('font-size','14px');
							},0);
						}
					}
				],
				ajaxSelectOptions : {
					cache : true
				},
				loadError : function(d, e, b, c) {
					parent.bootstrapQ.alert("表格数据加载处理失败,请尝试刷新或联系管理员!")
				},
				gridComplete:function(){
					 
			           /* var ids = jQuery(grid_selector).jqGrid('getDataIDs');  
			            for (var i = 0; i < ids.length; i++) {  
			                be = "<span class='ui-icon icon-plus-sign purple'></span>";//修改  
			                se = "<span class='ui-icon ui-icon-trash'></span>";//删除  
			                ce = "<span class='ui-icon icon-ok'></span>";//删除  
			                jQuery(grid_selector).jqGrid('setRowData', ids[i], { 'act': be+se+ce});  
			            }  */
				},
				loadComplete : function() {
					var table = this;
					setTimeout(function(){
						styleCheckbox(table);
						updateActionIcons(table);
						updatePagerIcons(table);
						enableTooltips(table);
					}, 0); 
				},
				jsonReader: {
                      root:"datas",      // 数据行，指定返回的json数据中哪个字段包含行数据（默认为：rows）
                      page: "currentPage",   // 当前页，默认:page
                      total: "totalPages",  // 总页数
                      records: "totalRecords",    // 总记录数
                      repeatitems : false         // 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
              },
              /*
              	分页查询向服务器发送的分页字段,当参数为null时不会被发到服务器端
              	prmNames数组的默认值为：
              	prmNames: {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search", nd:"nd", npage:null}
           	 */
              prmNames:{
            	  rows:"pageSize",//每页显示几条记录
            	  page:"currentPage",//显示第几页
            	  sort:"sort",//排序字段
            	  order:"order",//排序方式（asc/desc)
            	  oper:"oper", // operation参数名称
            	  editoper:"edit", // 当在edit模式中提交数据时，操作的名称
				  addoper:"add", // 当在add模式中提交数据时，操作的名称
				  deloper:"del"// 当在delete模式中提交数据时，操作的名称
              }
              
              //tree begin  
              /*
              treeIcons,树的图标，默认值：{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'}
              treeGrid:istreeGrid,  
              treeGridModel: 'adjacency',  
              ExpandColumn: treeCol,  指定那列来展开tree grid，默认为第一列，只有在treeGrid为true时起作用
              ExpandColClick:true,当为true时，点击展开行的文本时，treeGrid就能展开或者收缩，不仅仅是点击图片
              grouping:isGroupGrid,  
              groupingView:{  
	              groupField:[groupCol],  
	              groupColumnShow:[false],  
	              groupDataSorted : true,  
	              groupSummary : [false],  
	              groupText: ['<b>{0}</b>']  
              },  
              jsonReader:{     
                      repeatitems : jsonRepeat  
              },   
               gridComplete:fnGridComp,  
               //列宽拖动事件  
               resizeStop:fnResizeStop,  
               loadError:loadError  
              */
              
             // subGrid：false,//是否使用子表格
			});
		
		
			function aceSwitch( cellvalue, options, cell ) {
				setTimeout(function(){
					$(cell) .find('input[type=checkbox]')
							.wrap('<label class="inline" />')
						.addClass('ace ace-switch ace-switch-5')
						.after('<span class="lbl"></span>');
				}, 0);
			}
			
			//底部分页
			 jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						
						//底部编辑按钮
						edit: true,//是否启用
						edittext:'编辑',
						editicon : 'icon-pencil blue',//图标
						
						//添加按钮
						add: true,
						addicon : 'icon-plus-sign purple',
						addtext:'新增',
						addtitle:'新增角色',
						
						//删除按钮
						del: true,
						delicon : 'icon-trash red',
						deltext:'删除',
						deltitle:'去人删除该角色吗？',
						
						//搜索按钮
						search: true,
						searchicon : 'icon-search orange',
						
						//刷新按钮
						refresh: true,
						refreshicon : 'icon-refresh green',
						refreshtext:'刷新',
						
						//查看选中行的数据按钮
						view: true,
						viewicon : 'icon-zoom-in grey',
						
					} ,
					{
						//edit record form
						closeAfterEdit: true,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
						}
					},
					{
						//new record form
						closeAfterAdd: true,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							
							style_edit_form(form);
						},
						onclickSubmit: function(params, postdata) {
							postdata['grid-table_id']=null;
						}
					},
					{
						//delete record form
						url:WEB_ROOT+'/role/deleteRoles.action',
						recreateForm: true,
						closeAfterDel: true ,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							
							form.data('styled', true);
						},
						//提交的数据，json格式
						serializeDelData:function(postdata){
							return {'roleIds':postdata.id};
						},
						afterSubmit: function (xhr, postdata) {  
							var result=xhr.responseJSON;
							if(result.success)
							{
								 var consoleDlg = $(grid_selector);  
					                var selectedRowIds =  
					                    $(grid_selector).jqGrid("getGridParam", "selarrrow");  
					                var len = selectedRowIds.length;  
					                for (var i = 0; i < len ; i++) {  
					                    $(grid_selector).jqGrid("delRowData", selectedRowIds[0]);  
					                }  
							}
							else
							{
								parent.bootstrapQ.alert("删除失败，请重试或联系管理员");
							}
			            }
					},
					{
						//search form
						recreateForm: true,
						closeAfterSearch: true ,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						
						//multipleGroup:true,
						//showQuery: true
						
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
					
				) 
			
			
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					//form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
					//	.end().find('input[name=stock]')
					//		  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');	
					setTimeout(function(){
						form.closest('.ui-jqdialog').css('width','auto').css("padding-left",'4px')
						.css('margin-left','100px').css('margin-top','50px');
					},0)
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
				
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
		})
	</script>
</body>
</html>